<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="lib/easymap.css">
  <style>
    .ol-layer:first-child {
      filter: blur(4px);
    }
  </style>
</head>
<body>
<header>
  OLMAP&nbsp;&nbsp;&nbsp;
  <button id="drawPoint">drawPoint</button>
  <button id="drawLine">drawLine</button>
  <button id="drawPolygon">drawPolygon</button>
  <button id="drawRect">drawRect</button>
  <button id="drawCircle">drawCircle</button>
  <button id="clear">clear</button>
  &nbsp;&nbsp;&nbsp;
  <button id="cut">cut</button>
  <button id="merge">merge</button>
</header>
<div class="main-container" id="app">
  <div style="position:absolute;z-index: 99; top: 15px;right: 10px; color: white">
    <input type="checkbox" id="toggleEdit" checked> 开启编辑
    <input type="checkbox" id="toggleSnap" checked> 开启捕捉
    <input type="checkbox" id="tileGrid"> 切片网格
  </div>
</div>
<script src="dist/easymap.js"></script>
<script>
  var map = new EasyMap('app', {
    zoom: 4.5,
    center: [105.94346832861672, 38.08154819171156],
    tileType: 'NAV'
  })


  var drawTool = map.initDrawTool(document.getElementById('toggleEdit').checked);
  var editTool = drawTool.getEditTool()

  document.getElementById('drawPoint').addEventListener('click', () => {
    drawTool.drawPoint()
  })
  document.getElementById('drawLine').addEventListener('click', () => {
    drawTool.drawLineString()
  })
  document.getElementById('drawPolygon').addEventListener('click', () => {
    drawTool.drawPolygon()
  })
  document.getElementById('drawRect').addEventListener('click', () => {
    drawTool.drawRectangle()
  })
  document.getElementById('drawCircle').addEventListener('click', () => {
    drawTool.drawCircle()
  })
  document.getElementById('clear').addEventListener('click', () => {
    drawTool.clear()
  })

  document.getElementById('cut').addEventListener('click', () => {
    editTool.clipFeature()
  })

  document.getElementById('merge').addEventListener('click', () => {
    editTool.mergeFeature()
  })

  document.getElementById('tileGrid').addEventListener('change', e => {
    map.setTileGridVisible(e.target.checked)
  })

  document.getElementById('toggleEdit').addEventListener('change', e => {
    drawTool.toggleEdit(e.target.checked)
  })

  document.getElementById('toggleSnap').addEventListener('change', e => {
    drawTool.toggleSnap(e.target.checked)
  })
</script>
</body>
</html>
